<template>
  <div>
    <Cars ref="car" />
    <Map ref="map" @callbackComponent="callbackComponent" />
    <Navbar />
    <!-- <div id="children-view" :class="[isShow?'open':'']" > -->
    <div id="children-view" :class="{open:show}" >
      <router-view />
    </div>
    <Login />
  </div>

</template>

<script>
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap';
import Map from "../amap/index"
import Cars from "../cars/index"
import Navbar from "@c/navbar"
import Login from "./login"
import { Parking } from "@/api/parking.js"

export default {
  name: "Index",
  components: {
    Map,
    Cars,
    Navbar,
    Login
  },
  data() { 
    return {
      isShow: false
    }  
  },
  computed: {
    show() {
      const router = this.$route
      return router.name === "Index" ? false : true
    }
  },
  mounted() {
    document.addEventListener("mouseup",(e) => {
      const userCon = document.getElementById("children-view")
      if(userCon && !userCon.contains(e.target)) {
        this.$router.push({
          name: "Index"
        })
      }
    })
  },
  methods: {
    callbackComponent(params) {
      params.function && this[params.function](params.data);
    },
    loadMap() {
      Parking().then((res) => {
        const data = res.data.data;
        data.forEach((item) => {
          item.position = item.lnglat.split(",");
          item.content = `<img src=${require('@/assets/images/parking_location_img.png')} />`;
          item.offset = [-35, -45];
          item.label = {content:"1",offset:[10, 10]};
          item.text = `<div style="width:70px;font-size:20px;color:#fff;text-align:center;" >${item.carsNumber}</div>`
          item.offsetText = [-35, -25];
          item.events = {
            click: (e) => {
              this.walkPlan(e);
              this.getCarsList(e);
            }
          }
        })
        this.$refs.map.parkingData(data);
      })
    },
    walkPlan(data,item) {
      this.$refs.map.showWalkPlan(data);
    },
    getCarsList(e) {
      if(this.$refs.car) {
        const data = e.target.getExtData(); // amap提供的方法，需要在amap组件上绑定extData属性
        this.$refs.car.getCarsHandle({parkingId: data.id});
      }
    }
    
  }
}
</script>

<style lang="scss" scoped>
#children-view {
  position: fixed;
  top: 0;
  bottom: 0;
  right: -600px;
  width: 410px;
  background: #34393f;
  z-index: 9999;
  @include webkit(transition, all .3s ease 0s);
  @include webkit(box-shadow, -5px 0 38px 0 rgba(0,0,0,.4) );
  &.open {
    right: 0px;
  }
}
</style>